<template>
    <view class="page">
        <view class="header-line">
            <view class="return-btn" @click="backPage"></view>
            <view class="text">编辑基本信息</view>
        </view>
        <view class="main-content">
            <view class="content">
                <view class="edit-form">
                    <view class="form-group">
                        <view class="group-title">头像</view>
                        <view class="avatar-upload">
                            <view class="avatar-preview" @click="openSelectImage">
                                <view class="usericon" :style="`--icon: url(${ userIcon })`"></view>
                            </view>
                        </view>
                    </view>
                    <view class="form-group">
                        <view class="group-title">姓名</view>
                        <input placeholder="请输入你的姓名" class="form-input" v-model="username">
                    </view>
                    <view class="form-group">
                        <view class="group-title">学校</view>
                        <input placeholder="请输入你的学校" class="form-input" v-model="college">
                    </view>
                    <view class="form-group">
                        <view class="group-title">专业</view>
                        <input placeholder="请输入你的专业" class="form-input" v-model="major">
                    </view>
                    <view class="form-group">
                        <view class="group-title">年级</view>
                        <view class="radio-group">
                            <view v-for="item in grades" :key="item" class="radio-item"
                                :class="{ active: level === item }" @click="handleRadio(item)">
                                {{ item }}
                            </view>
                        </view>
                    </view>
                    <!-- <view class="form-group">
                        <view class="group-title">所在地</view>
                        <input placeholder="请输入你的所在地" class="form-input" v-model="location">
                    </view> -->
                    <view class="form-group">
                        <view class="group-title">个人简介</view>
                        <textarea placeholder="介绍一下你自己吧" class="form-textarea" rows="4"
                            v-model="bio"></textarea>
                    </view>
                    <view class="form-actions">
                        <view type="submit" class="submit-btn" @click='submit_my'>保存修改</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// 业务层
import { getUserInfo } from '../../service/user';

// 服务层
import { user } from '../../server/user';

export default {
    data() {
        return {
            username: '',
            userIcon: '',
            college: '',
            major: '',
            level: '大一',
            bio: '',
            grades: ['大一', '大二', '大三', '大四'],
        }
    },
    methods: {
        backPage() {
            uni.navigateBack();
        },
        handleRadio(s) {
            this.level = s;
        },
        submit_my() {
            let username = this.username;
            let college = this.college;
            let major = this.major;
            let level = this.level;
            let bio = this.bio;
            user.updateUserInfo(username, college, major, level, bio).then((res) => {
                if (res.success) {
                    uni.showToast({
                        title: '修改成功',
                        icon: 'none',
                        duration: 1000
                    });
                    setTimeout(() => {
                        this.backPage();
                    }, 900);
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                }
            }).catch((err) => {
                uni.showToast({
                    title: '请检查网络',
                    icon: 'none'
                });
            });
        },
        openSelectImage() {
            // uni.getUserProfile({
            //     // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            //     desc: '用于完善用户资料',
            //     success: (res) => {
            //         console.log(res);
            //         this.userIcon = res.userInfo.avatarUrl; // 获取头像并赋值给userIcon
            //         // 这里可以继续处理其他逻辑，比如保存用户信息到服务器
            //     },
            //     fail: (err) => {
            //         console.error('获取用户信息失败', err);
            //     }
            // });
            uni.chooseImage({
                count: 1,                    // 默认9
                sizeType: ['compressed'],    // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'],       // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                    // 读取图片并转换为 base64编码的 dataURL并 显示在页面中
					const img = res.tempFilePaths[0];
                    if (!img) {
                        uni.showToast({
                            title: '请选择图片',
                            icon: 'none'
                        });
                    }
                    uni.getFileSystemManager().readFile({
                        filePath: img,
                        encoding: 'base64',
                        success: async (res) => {
                            const base64Image = `data:image/jpeg;base64,${res.data}`;
                            // 加载转圈圈
                            uni.showLoading({
                                title: '上传中...',
                                mask: true
                            });
                            // 更新用户头像
                            user.updateUserIcon(base64Image).then((res) => {
                                if (res.success) {
                                    this.userIcon = base64Image;
                                    uni.showToast({
                                        title: '上传成功',
                                        icon: 'none'
                                    });
                                } else {
                                    uni.showToast({
                                        title: res.msg,
                                        icon: 'none'
                                    });
                                }
                            }).catch((err) => {
                                uni.showToast({
                                    title: '请检查网络',
                                    icon: 'none'
                                });
                            });
                        },
                        fail: (err) => {
                            console.error('读取文件失败', err);
                        }
                    });
                },
                fail: (err) => {
                    console.error('选择图片失败', err);
                    uni.showToast({
                        title: '选择图片失败',
                        icon: 'none'
                    });
                }
            });
        }
    },
    onLoad() {
        getUserInfo(this);
    },
}
</script>

<style>
.main-content {
	background-color: #f5f5f5;
}

.content {
    max-width: 150vmin;
    margin: 0 auto;
    padding: 5vmin 0;
}

.edit-form {
    background: #fff;
    border-radius: 3vmin;
    padding: 6vmin;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
}

.form-group {
    margin-bottom: 6vmin;
}

.group-title {
    font-size: 3.5vmin;
    font-weight: 900;
    margin-bottom: 2.5vmin;
}

.avatar-upload {
    --size: 30vmin;
    width: var(--size);
    height: var(--size);
    margin: 0 auto;
}

.avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.5vmin dashed #ddd;
    overflow: hidden;
    transition: all .2s ease;
    position: relative;
}

.usericon {
    width: 99%;
    height: 99%;
    border-radius: 50%;
    overflow: hidden;
    background-image: var(--icon);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-input {
	--h: 9vmin;
    height: var(--h);
    padding-left: 1.5vmin;
    border: 0.25vmin solid #ddd;
    border-radius: 2vmin;
    font-size: 3.5vmin;
    color: #1a1717; 
    transition: all .3s ease;
    box-sizing: border-box;
}

.form-textarea {
	--h: 9vmin;
	width: 100%;
    height: var(--h);
    padding: 1.5vmin;
    border: 0.25vmin solid #ddd;
    border-radius: 2vmin;
    font-size: 3.5vmin;
    color: #333;
	resize: vertical;
	min-height: 25vmin;
    transition: all .2s ease;
}

.radio-group {
  display: flex;
  justify-content: space-between;
  padding-top: 2.5vmin;
  height: 9vmin;
}

.radio-item {
  flex: 1;
  text-align: center;
  padding: 2vmin 3vmin;
  margin: 0 1.25vmin;
  border: 0.25vmin solid #ccc;
  border-radius: 1vmin;
  transition: all 0.3s;
  font-size: 3vmin;
}

.radio-item.active {
  border-color: #007AFF;
  background-color: #007AFF;
  color: white;
}

.submit-btn {
    --h: 10vmin;
    width: 80vw;
    height: var(--h);
    background: #07C160;
    color: #fff;
    border-radius: 4vmin;
    font-size: 4vmin;
    text-align: center;
    line-height: var(--h);
    margin: 0 auto;
}
</style>